<template>
  <div class="command-list">
    <div class="command-table-wrapper">
    <table class="command-table">
      <thead>
        <tr>
          <th>指令名称</th>
          <th>指令内容</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="command in commands" :key="command.id">
          <td>{{ command.name }}</td>
          <td>{{ command.content }}
            <template v-if="command.hasParameter">
              <input
                type="text"
                v-model="command.parameter"
                placeholder="输入参数..."
                class="parameter-input"
              />
            </template>
          </td>
          <td>
            <button class="send-btn" @click="onSendCommand(command)">发送</button>
            <button class="delete-btn" @click="onDeleteCommand(command.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';

// 定义props
interface Command {
  id: number;
  name: string;
  content: string;
  hasParameter?: boolean;
  parameter?: string;
}

defineProps<{
  commands: Command[];
}>();

// 定义emits
const emit = defineEmits<{
  (e: 'send-command', command: Command): void;
  (e: 'delete-command', commandId: number): void;
}>();

// 方法：处理指令发送
const onSendCommand = (command: Command) => {
  emit('send-command', command);
};

// 方法：处理指令删除
const onDeleteCommand = (commandId: number) => {
  emit('delete-command', commandId);
};
</script>

<style scoped>
.command-list {
  overflow-y: auto;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
}

.command-table-wrapper {
  overflow-x: auto;
}

.command-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
}

.command-table th,
.command-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.command-table th {
  background-color: #f5f5f5;
  font-weight: bold;
  white-space: nowrap;
}

.parameter-input {
  margin-left: 10px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100px;
  box-sizing: border-box;
}

.send-btn,
.delete-btn {
  padding: 4px 10px;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

.send-btn {
  background-color: #34a853;
  margin-right: 5px;
}

.delete-btn {
  background-color: #ea4335;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .command-table th,
  .command-table td {
    padding: 8px;
  }

  .parameter-input {
    width: 80px;
    margin-left: 5px;
  }

  .send-btn,
  .delete-btn {
    padding: 3px 8px;
    font-size: 12px;
  }
}
</style>